<style>
    @import '../../styles/common.less';
    @import '../../styles/loading.less';

    .query {
        margin-top: 5px;
        font-size: 15px;
        display: flex;
        justify-content:flex-start;
        align-items:Center;
    }

    .main-table {
        margin-top: 10px;
    }
</style>

<template>
    <div>
        <Row>
            <Col span="6">
            <Row class="query">
                <Col span="4">昵称：</Col>
                <Col span="20">
                <Input v-model="queryCon.name" clearable ></Input>
                </Col>
            </Row>
            </Col>
            <Col span="6">
            <Row class="query">
                <Col span="4">性别：</Col>
                <Col span="20">
                <Select v-model="queryCon.sex" clearable>
                    <Option :value="1">男</Option>
                    <Option :value="2">女</Option>
                    <Option :value="0">未知</Option>
                </Select>
                </Col>
            </Row>
            </Col>
        </Row>
        <Row class="query">
            <Col span="22">
            <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
            </Col>
        </Row>
        <div class="main-table">
            <Table border :columns="columns" :data="data"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>
        <Modal v-model="imgModal"
               title="查看图片"
               @on-cancel="imgModal = false">
            <img :src="imgUrl" width="100%" height="100%">
            <div slot="footer">
                <Button type="primary" @click="imgModal = false">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import util from '@/libs/util';
    import Cookies from 'js-cookie';

    export default {
        name: 'exportable-table',
        data () {
            return {
                columns: [{
                    title: '序号',
                    key: 'rownum',
                    width: 60,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', {}, ((this.pageIndex - 1) * this.pageSize + params.index + 1));
                    }
                }, {
                    title: '昵称',
                    key: 'nickname'
                }, {
                    title: '头像',
                    key: 'headimgurl',
                    render: (h, params) => {
                        let imgpath = params.row.headimgurl;
                        return h('img', {
                            style: {
                                height: '60px'
                            },
                            attrs: {
                                src: imgpath
                            },
                            on: {
                                click: () => {
                                    this.imgUrl = imgpath;
                                    this.imgModal = true;
                                }
                            }
                        });
                    }
                }, {
                    title: '性别',
                    key: 'sex',
                    render: (h, params) => {
                        return h('div', {}, (params.row.sex === 1 ? '男' : (params.row.sex === 2 ? '女' : '未知')));
                    }
                }, {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.delete(params.row.id);
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }],
                baseuser: JSON.parse(Cookies.get('baseUser')),
                data: [],
                imgModal: false,
                imgUrl: '',

                total: 0,
                pageIndex: 1,
                pageSize: 7,
                queryCon: {}
            };
        },
        mounted () {
            this.loadList();
        },
        methods: {
            loadList () {
                util.ajax.post('/busine/member/list', util.toFormData({
                    page: this.pageIndex,
                    size: this.pageSize,
                    name: this.queryCon.name ? this.queryCon.name : '',
                    sex: this.queryCon.sex ? this.queryCon.sex : (this.queryCon.sex === 0 ? 0 :'')
                })).then(res => {
                    this.data = res.data.data.list;
                    this.total = res.data.data.total;
                });
            },
            delete (id) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确定删除？</p>',
                    onOk: () => {
                        util.ajax.post('/busine/member/delete', util.toFormData({
                            id: id
                        })).then(res => {
                            if (res.data.message === 'SUCCESS') {
                                this.$Message.success('删除成功！');
                                this.loadList();
                            }
                        });
                    },
                    onCancel: () => {
                    }
                });
            }
        }
    };
</script>